body {
  height: 100vh;
  background: #f7f7f7; }

.header {
  flex: 1;
  height: 1.3333rem;
  position: relative; }
  .header .title {
    text-align: center;
    line-height: 1.3333rem;
    color: #eee;
    font-size: 16px; }
    [data-dpr="2"] .header .title {
      font-size: 32px; }
    [data-dpr="3"] .header .title {
      font-size: 48px; }
  .header .icon-item {
    position: absolute;
    top: 50%;
    right: 2rem;
    transform: translateY(-50%);
    width: 0.586666rem;
    height: 0.586666rem; }
    .header .icon-item img {
      width: 100%;
      height: 100%; }
  .header .icon-item:nth-of-type(1) {
    right: 2rem; }
  .header .icon-item:nth-of-type(2) {
    right: 0.933333rem; }

.search {
  position: relative;
  padding: 0.266666rem; }
  .search input {
    margin: 0;
    padding: 0;
    background: #f7f7f7;
    height: 0.666666rem;
    padding-left: 0.8rem;
    border: 0; }
  .search i {
    position: absolute;
    left: 0.533333rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px; }
    [data-dpr="2"] .search i {
      font-size: 24px; }
    [data-dpr="3"] .search i {
      font-size: 36px; }

.nav {
  display: flex;
  height: 2.933333rem;
  padding: 0.4rem 0; }
  .nav .nav-item {
    width: 33.3%;
    height: 100%; }
    .nav .nav-item a {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center; }
      .nav .nav-item a i {
        width: 0.8rem;
        height: 0.8rem;
        display: inline-block; }
      .nav .nav-item a h2 {
        font-size: 14px;
        padding-top: 0.266666rem;
        color: #222; }
        [data-dpr="2"] .nav .nav-item a h2 {
          font-size: 28px; }
        [data-dpr="3"] .nav .nav-item a h2 {
          font-size: 42px; }
      .nav .nav-item a span {
        padding-top: 0.2rem;
        color: #bbb; }
    .nav .nav-item .friend-icon {
      background: url(../../images/friend/add-friend.png) no-repeat;
      background-size: cover; }
    .nav .nav-item .txl-icon {
      background: url(../../images/friend/tongxun.png) no-repeat;
      background-size: cover; }
    .nav .nav-item .circle-icon {
      background: url(../../images/friend/circle.png) no-repeat;
      background-size: cover; }

.txl-list {
  margin-top: 0.266666rem;
  padding-left: 0.533333rem; }
  .txl-list .txl-item {
    height: 1.6rem;
    padding: 0.133333rem 0;
    display: flex;
    align-items: center; }
    .txl-list .txl-item .photo {
      margin-top: 0.2rem;
      width: 0.8rem;
      height: 0.8rem; }
      .txl-list .txl-item .photo img {
        width: 100%;
        height: 100%; }
    .txl-list .txl-item .item-right {
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      flex: 1;
      margin-left: 0.4rem;
      border-bottom: 1px solid #eee; }
      .txl-list .txl-item .item-right hgroup {
        padding-top: 0.266666rem;
        display: flex;
        justify-content: space-between; }
        .txl-list .txl-item .item-right hgroup strong {
          font-size: 14px;
          color: #222; }
          [data-dpr="2"] .txl-list .txl-item .item-right hgroup strong {
            font-size: 28px; }
          [data-dpr="3"] .txl-list .txl-item .item-right hgroup strong {
            font-size: 42px; }
        .txl-list .txl-item .item-right hgroup time {
          padding-right: 0.533333rem;
          color: #bbb; }
    .txl-list .txl-item p {
      font-size: 10px;
      padding-top: 0.2rem; }
      [data-dpr="2"] .txl-list .txl-item p {
        font-size: 20px; }
      [data-dpr="3"] .txl-list .txl-item p {
        font-size: 30px; }
    .txl-list .txl-item:nth-last-of-type(1) .item-right {
      border: 0; }
